/**
 * @classDescription  选项卡构造函数
 * @type {Object}
 * @param {String | Object} TAB父层的id或者Dom对象 
 * @param {String}  绑定鼠标行为的tab
 * @param {String | Object} TAB CONTENT父层的id或者Dom对象 
 * @param {String}  被切换的TAB CONTENT
 * @param {Object}  参数集合（包括event,effect,fadeStep,current,loop,index,autoPlay,timeout,callback）
 */ 
function Tab(tabId, tabTag, contentId, contentTag, option){
	this.setOption(option);

	var tabEl = Kg.$(tabId),
		tabChild = tabEl.childNodes,
		contentEl = Kg.$(contentId),
		contentChild = contentEl.childNodes;
	this.tabsFather = tabEl;
	this.tabs = [];
	this.contents = [];
	this.timer = null;

	for(var i = 0, l = tabChild.length; i < l; i++){
		if(tabChild[i].nodeType == 1 && tabChild[i].tagName.toLowerCase() == tabTag){
			this.tabs.push(tabChild[i]);
		}
	}

	for(var i = 0, l = contentChild.length; i < l; i++){
		if(contentChild[i].nodeType == 1 &&contentChild[i].tagName.toLowerCase() == contentTag){
			this.contents.push(contentChild[i]);
		}
	}
	
	this.currentIndex = this.option.index === "random"?
		parseInt(Math.random() * this.tabs.length):
		this.option.index;
	this.tabs[this.currentIndex].className += " " + this.option.current;
	this.contents[this.currentIndex].style.display = "block";
	this.run();
};

Tab.prototype.setOption = function(option){
	this.option = {
		event:	"click",            //绑定事件
		effect:	 null,				//切换特效
		fadeStep:	 1,				//渐现步长值
		current:	"current",     //切换的className
		loop:	true,				//点击是否循环
		index:	0,					//currentIndex
		autoPlay:	false,         //是否自动切换选项卡
		timeout:	1500,		   //切换时间
		callback:	null			//回调函数
	};

	Kg.extend(this.option, option || {}, true);
};

Tab.prototype.run = function(){
	for(var i = 0, l = this.tabs.length; i < l; i++){
		Kg.addEvent(this.tabs[i], this.option.event, Kg.bind(function(index){
			this.change(index);
		}, this, i));
	}

	if(this.option.autoPlay){
		this.auto();

		Kg.addEvent(this.tabsFather, "mouseover", Kg.bind(function(){
			clearInterval(this.timer);
		}, this));

		Kg.addEvent(this.tabsFather, "mouseout", Kg.bind(function(){
			this.auto();
		}, this));
	}
};

Tab.prototype.change = function(index){
	var current = this.option.current;
	var curIndex = this.currentIndex;
	var lastCon = this.contents[curIndex];
	var curCon = this.contents[index];
	this.tabs[curIndex].className = this.tabs[curIndex].className.replace(new RegExp("\\s*" + current,"g"), "");
	this.tabs[index].className += " " + current;
	lastCon.style.display = "none";
	curCon.style.display = "block";
	if(this.option.effect === "fade"){
		clearInterval(lastCon.timer);
		Kg.setOpacity(this.contents[index],0);
		curCon.timer = Kg.fadein(curCon,1,this.option.fadeStep);
	}
	this.currentIndex = index;
	typeof(this.option.callback) == "function" && this.option.callback();
};

Tab.prototype.auto = function(){
	this.timer = setInterval(Kg.bind(function(){
		this.next();
	}, this), this.option.timeout)
};

Tab.prototype.next = function(){
	var index = (this.currentIndex + 1) > (this.tabs.length - 1)?0:(this.currentIndex + 1);
	if(this.option.loop === false && index === 0){
		return;
	}
	this.change(index);
};

Tab.prototype.prev = function(){
	var index = (this.currentIndex - 1) >= 0?(this.currentIndex - 1):(this.tabs.length - 1);
	if(this.option.loop === false && index === this.tabs.length - 1){
		return;
	}
	this.change(index);
};

Tab.rotation = function(contentId, contentTag, timeout){
	var timer = null;
	var el = Kg.$(contentId);
	var els = Kg.$T(contentTag,el);
	var index = 0;

	Kg.addEvent(el, "mouseover", function(){
		clearInterval(timer);
	});
	Kg.addEvent(el, "mouseout", function(){
		go();
	});
	function go(){
		timer = window.setInterval(function(){
			for(var i = 0;i < els.length; i++){
				if(els[i].offsetHeight > 0) index = i;
				els[i].style.display = "none";
			}
				
			var num = (index >= els.length -1)?0:index+1;
			els[num].style.display = "block";
		}, timeout)	;
	}
	go();
}